

<!DOCTYPE html>
<html style="background-color: #e2e2e2;">
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="培训系统">
  <meta name="description" content="培训系统">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>培训系统</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../lib/css/global.css">
  <style>
    .my-title {
      color: #393D49;
    }
    .my-title:hover {
      color: #eb7350;
      border-bottom:2px solid #eb7350;
    }
    .my-title:hover {
      color: #eb7350;
      border-bottom:2px solid #eb7350;
    }
  </style>
</head>
<body class="fly-full" style="background-color: #ffffff">

<div class="fly-header" style="background-color: #F4E2CE;border: 0px;">
  <div class="layui-container">
    <ul class="layui-nav fly-nav-user">
      <!-- 未登入的状态 -->
      <li class="layui-nav-item">
        <a class="iconfont icon-touxiang layui-hide-xs" href="javascript:0;"></a>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:0;" style="color: orangered">登入</a>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:0;" style="color:#393D49;">前往后台</a>
      </li>
    </ul>
  </div>
</div>

<!--轮播图-->
<div class="layui-main fly-case-header"><!---->
  <div class="layui-carousel" id="head_carousel" lay-filter="head_carousel">
    <div carousel-item="">
      <div class="layui-bg-blue">条目1</div>
      <div class="layui-bg-cyan">条目2</div>
      <div class="layui-bg-gray">条目3</div>
      <div class="layui-bg-green">条目4</div>
      <div class="layui-bg-red">条目5</div>
    </div>
  </div>
</div>

<div class="layui-container">
  <div class="layui-tab layui-tab-brief">
    <ul class="layui-row layui-tab-title">
      <li class="my-title" style="color: #eb7350;border-bottom:2px solid #eb7350;">日常课程</li>
      <li class="my-title layui-col-md-offset10"><a href="listdetails.html">更多&gt;&gt;&gt;</a></li>
    </ul>
    <div class="layui-tab-content">
      <ul class="fly-case-list">
        <li data-id="123">
          <a class="fly-case-img" href="details.html" target="_blank" >
            <img src="./img/kc1.jpg" alt="日常培训课程">
            <cite class="layui-btn layui-btn-primary layui-btn-small">前往课程</cite>
          </a>
          <h2><a href="javascript:0;" target="_blank">标题</a></h2>
          <div class="my-elip" id="test111" style="min-height: 4em;">
            Fly 社区是 layui 的官方社区，全站的前端层面基于 Layui 风格编写，轻量而简洁，并且模版已经开源，可用于极简社区模板。
            Fly 社
            区是 layui 的官方社区，全站的前端层面基于 Layui 风格编写，轻量而简洁，并且模版已经开源，可用于极简社区模板。
          </div>

        </li>
        <li data-id="123">
          <a class="fly-case-img" href="javascript:0;" target="_blank" >
            <img src="./img/kc4.jpg" alt="日常培训课程">
            <cite class="layui-btn layui-btn-primary layui-btn-small">前往课程</cite>
          </a>
          <h2><a href="javascript:0;" target="_blank">标题</a></h2>
          <div class="my-elip">Fly 社区是 layui 的官方社区，全站的前端层面基于 Layui 风格编写，轻量而简洁，并且模版已经开源，可用于极简社区模板。</div>

        </li>
      </ul>
    </div>
  </div>
</div>

<div class="layui-container">
  <div class="layui-tab layui-tab-brief">
    <ul class="layui-row layui-tab-title">
      <li class="my-title" style="color: #eb7350;border-bottom:2px solid #eb7350;">我的日常课程</li>
      <li class="my-title layui-col-md-offset10"><a href="listdetails.html">更多&gt;&gt;&gt;</a></li>
    </ul>
    <div class="layui-tab-content">
      <ul class="fly-case-list">
        <li data-id="123">
          <a class="fly-case-img" href="javascript:0;" target="_blank" >
            <img src="./img/kc2.jpg" alt="日常培训课程">
            <cite class="layui-btn layui-btn-primary layui-btn-small">前往课程</cite>
          </a>
          <h2><a href="javascript:0;" target="_blank">标题</a></h2>
          <div class="my-elip">Fly 社区是 layui 的官方社区，全站的前端层面基于 Layui 风格编写，轻量而简洁，并且模版已经开源，可用于极简社区模板。</div>

        </li>
      </ul>
    </div>
  </div>
</div>

<div class="layui-container">
  <div class="layui-tab layui-tab-brief">
    <ul class="layui-row layui-tab-title">
      <li class="my-title" style="color: #eb7350;border-bottom:2px solid #eb7350;">我的年度课程</li>
      <li class="my-title layui-col-md-offset10"><a href="listdetails.html">更多&gt;&gt;&gt;</a></li>
    </ul>
    <div class="layui-tab-content">
      <ul class="fly-case-list">
        <li data-id="123">
          <a class="fly-case-img" href="javascript:0;" target="_blank" >
            <img src="./img/kc3.jpg" alt="日常培训课程">
            <cite class="layui-btn layui-btn-primary layui-btn-small">前往课程</cite>
          </a>
          <h2><a href="javascript:0;" target="_blank">标题</a></h2>
          <div class="my-elip">Fly 社区是 layui 的官方社区，全站的前端层面基于 Layui 风格编写，轻量而简洁，并且模版已经开源，可用于极简社区模板。</div>
          <a></a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="fly-footer" style="background-color: #F4E2CE;border: 0px;">
  <p><a href="javascript:0;" target="_blank">IT社区</a> 2021 &copy; <a href="javascript:0;" target="_blank">行政管理部 人力资源部 联合 出品</a></p>
  <p>
    <a href="javascript:0;" target="_blank">国资公司</a>
    <a href="javascript:0;" target="_blank">IT条线</a>
  </p>
</div>

<script src="../lib/layui/layui.js"></script>
<script type="text/javascript" src="../lib/pulg/tooltip/js/tooltip.js"></script>
<script>

layui.use(['carousel', 'form','jquery'], function(){
  var carousel = layui.carousel,
  $ = layui.jquery;

  //图片轮播
  carousel.render({
    elem: '#head_carousel'
    ,width: '1140px'
    ,height: '260px'
    ,interval: 5000
    ,autoplay: true
    ,arrow: 'hover'
    ,full: false
  });

  var reg = new RegExp(" ","g");//g,表示全部替换。
  $(".my-elip").each(function() {
    var str = $(this).html();
    str = str.replace(reg,"");
    var subStr = str.substring(0, 50);
    $(this).html(subStr + (str.length > 20 ? '...' : ''));
  });

  $('#test111').on({
    mouseenter:function(){
      var that = this;
      tips =layer.tips("<span style='color:#000;'>说明：只能选择阿毛我，哈哈哈</span>",that,{tips:[2,'#fff'],time:0,area: 'auto',maxWidth:500});
    },
    mouseleave:function(){
      layer.close(tips);
    }
  });


});
</script>
</body>
</html>
